<!DOCTYPE html>
<!--suppress JSAnnotator -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉选项二级联动</title>
</head>
<body>
<select name="" id="provinces">
    <option value=" ">请选择省份</option>
</select>


<select name="" id="citys">
    <option value=" ">请选择城市</option>
</select>


<script>
    data1={'河北省':['石家庄','秦皇岛','保定','廊坊','唐山'],
        '陕西省':['西安','咸阳','宝鸡','延安','安康','万源'],
        '甘肃省':['兰州','天水','武威','玉门','嘉峪关','平凉','陇南','定西','张掖','酒泉','白银']
    };
    var pro_ele=document.getElementById("provinces");
    for(var i in data1){
        //   console.log(i);
        var pro=document.createElement('option');
        pro.innerHTML=i;
        pro_ele.appendChild(pro)
    }


    var city_ele=document.getElementById("citys");
    pro_ele.onchange=function () {
        // this 是select标签
        console.log(this);
        //  select标签下的option数组
        console.log(this.options);
        //   select标签下选中后的option下标
        console.log(this.selectedIndex);
        //   取选中的省份option标签
        console.log(this.options[this.selectedIndex]);
        //   取省份的文本
        console.log(this.options[this.selectedIndex].innerHTML);
        var citys=data1[this.options[this.selectedIndex].innerHTML];

        city_ele.options.length=1;

        for(var j=0;j<citys.length;j++){
            var cit = document.createElement('option');
            cit.innerHTML=citys[j];
            city_ele.appendChild(cit)
        }
    };





    for(var i in data1){
        console.log(i)
    }
    a={name:'alex'};
    b={'name':'alex'};
    console.log(a.name);
    console.log(b['name']);
    console.log('-------------');
    console.log(data1);
    console.log(data1.河北省);
    console.log(data1['河北省']);
    console.log(typeof data1);
</script>
</body>
</html>